<template>
  <view class="card-manage-page">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back-btn" @click="goBack">
        <image class="back-icon" src="/static/Images/order/Fanhui.png" mode="aspectFit"></image>
      </view>
      <view class="page-title">卡密管理</view>
      <view class="placeholder"></view>
    </view>
    
    <!-- 标签导航 -->
    <view class="tab-navigation">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index"
        class="tab-item"
        :class="{ active: currentTab === index }"
        @click="switchTab(index)"
      >
        {{ tab.name }}
      </view>
    </view>
    
    <!-- 搜索栏 -->
    <view class="search-container">
      <view class="search-box">
        <image class="search-icon" src="/static/Images/index/Search.png" mode="aspectFit"></image>
        <input 
          class="search-input" 
          type="text" 
          placeholder="输入商品名称/卡密/订单编号"
          v-model="searchKeyword"
          @input="onSearchInput"
        />
      </view>
      <view class="search-btn" @click="handleSearch">
        查询
      </view>
    </view>
    
    <!-- 卡密列表 -->
    <view class="card-list">
      <view 
        v-for="(item, index) in filteredCardList" 
        :key="index"
        class="card-item"
        :class="{ selected: item.selected }"
        @click="selectCard(item)"
      >
        <view class="card-info">
          <view class="product-name">商品名称：{{ item.productName }}</view>
          <view class="card-type">卡密类型：{{ item.cardType }}</view>
          <view class="order-number">订单编号：{{ item.orderNumber }}</view>
          
          <!-- 卡密信息展示 -->
          <view class="card-details">
            <view class="card-info-row">
              <text class="card-label">卡密信息：</text>
              <text class="card-value">{{ item.cardInfo }}</text>
              <image 
                class="toggle-icon" 
                :src="item.expanded ? '/static/Images/goods/Xiangxshang.png' : '/static/Images/goods/Xiangxia.png'"
                mode="aspectFit"
                @click.stop="toggleCardInfo(item)"
              ></image>
            </view>
            
            <!-- 展开的卡密列表 -->
            <view v-if="item.expanded" class="card-list-expanded">
              <view 
                v-for="(card, cardIndex) in item.cards" 
                :key="cardIndex"
                class="card-row"
              >
                <text class="card-number">卡密{{ cardIndex + 1 }}：{{ card.number }}</text>
                <view class="card-actions">
                  <image 
                    class="action-icon delete-icon" 
                    src="/static/Images/goods/Shanchu.png" 
                    mode="aspectFit"
                    @click.stop="deleteCard(item, cardIndex)"
                  ></image>
                  <image 
                    class="action-icon edit-icon" 
                    src="/static/Images/user/Shezhi.png" 
                    mode="aspectFit"
                    @click.stop="editCard(item, cardIndex)"
                  ></image>
                  <image 
                    class="action-icon copy-icon" 
                    src="/static/Images/order/Fuzhi.png" 
                    mode="aspectFit"
                    @click.stop="copyCard(card.number)"
                  ></image>
                </view>
              </view>
            </view>
          </view>
          
          <view class="time-info">
            <view class="time-row">
              <text class="time-label">上架时间：</text>
              <text class="time-value">{{ item.listTime }}</text>
            </view>
            <view class="time-row">
              <text class="time-label">下架时间：</text>
              <text class="time-value">{{ item.delistTime || '---' }}</text>
            </view>
          </view>
          
          <view class="price-status">
            <view class="price">出售价格：¥{{ item.price }}</view>
            <view class="status" :class="getStatusClass(item.status)">{{ item.statusText }}</view>
          </view>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view v-if="filteredCardList.length === 0" class="empty-state">
        <image class="empty-icon" src="/static/Images/common/Gantanhao.png" mode="aspectFit"></image>
        <text class="empty-text">暂无相关卡密信息</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0,
      searchKeyword: '',
      tabs: [
        { name: '出售中', status: 'selling' },
        { name: '交易中', status: 'trading' },
        { name: '交易成功', status: 'success' },
        { name: '已下架', status: 'delisted' },
        { name: '退款/售后', status: 'refund' }
      ],
      cardList: [
        {
          id: 1,
          productName: '爱奇艺黄金会员7天',
          cardType: '官方激活码',
          orderNumber: '20250423559889542438',
          cardInfo: '10个卡密',
          cards: [
            { number: 'skfn*******kmm' },
            { number: 'skfn*******kmm' },
            { number: 'skfn*******kmm' }
          ],
          listTime: '2025年5月29日 23:24:22',
          delistTime: '2025年6月15日 23:24:22',
          price: '8.00',
          status: 'delisted',
          statusText: '已下架',
          expanded: false,
          selected: false
        },
        {
          id: 2,
          productName: '爱奇艺黄金会员7天',
          cardType: '官方激活码',
          orderNumber: '20250423559889542438',
          cardInfo: '10个卡密',
          cards: [
            { number: 'skfn*******kmm' },
            { number: 'skfn*******kmm' },
            { number: 'skfn*******kmm' }
          ],
          listTime: '2025年5月29日 23:24:22',
          delistTime: '',
          price: '8.00',
          status: 'selling',
          statusText: '在售',
          expanded: false,
          selected: false
        }
      ]
    };
  },
  computed: {
    filteredCardList() {
      let list = this.cardList.filter(item => {
        return item.status === this.tabs[this.currentTab].status;
      });
      
      if (this.searchKeyword) {
        const keyword = this.searchKeyword.toLowerCase();
        list = list.filter(item => {
          return item.productName.toLowerCase().includes(keyword) ||
                 item.orderNumber.toLowerCase().includes(keyword) ||
                 item.cards.some(card => card.number.toLowerCase().includes(keyword));
        });
      }
      
      return list;
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    switchTab(index) {
      this.currentTab = index;
      this.searchKeyword = '';
    },
    onSearchInput(e) {
      this.searchKeyword = e.detail.value;
    },
    handleSearch() {
      // 搜索逻辑已在computed中实现
      console.log('搜索关键词:', this.searchKeyword);
    },
    selectCard(item) {
      item.selected = !item.selected;
    },
    toggleCardInfo(item) {
      item.expanded = !item.expanded;
    },
    deleteCard(item, cardIndex) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这个卡密吗？',
        success: (res) => {
          if (res.confirm) {
            item.cards.splice(cardIndex, 1);
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            });
          }
        }
      });
    },
    editCard(item, cardIndex) {
      uni.showToast({
        title: '编辑功能开发中',
        icon: 'none'
      });
    },
    copyCard(cardNumber) {
      uni.setClipboardData({
        data: cardNumber,
        success: () => {
          uni.showToast({
            title: '卡密已复制',
            icon: 'success'
          });
        }
      });
    },
    getStatusClass(status) {
      const statusMap = {
        'selling': 'status-selling',
        'trading': 'status-trading',
        'success': 'status-success',
        'delisted': 'status-delisted',
        'refund': 'status-refund'
      };
      return statusMap[status] || '';
    }
  }
};
</script>

<style lang="scss" scoped>
.card-manage-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 导航栏样式 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  background-color: #ffffff;
  padding: 0 30rpx;
  position: sticky;
  top: 0;
  z-index: 100;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 40rpx;
  height: 40rpx;
}

.page-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333333;
}

.placeholder {
  width: 60rpx;
}

/* 标签导航样式 */
.tab-navigation {
  display: flex;
  background-color: #ffffff;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 30rpx 0;
  font-size: 28rpx;
  color: #666666;
  position: relative;
  
  &.active {
    color: #ff4757;
    font-weight: 600;
    
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60rpx;
      height: 4rpx;
      background-color: #ff4757;
      border-radius: 2rpx;
    }
  }
}

/* 搜索栏样式 */
.search-container {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background-color: #ffffff;
  margin-bottom: 20rpx;
}

.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #f8f8f8;
  border-radius: 50rpx;
  padding: 0 30rpx;
  margin-right: 20rpx;
}

.search-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 20rpx;
}

.search-input {
  flex: 1;
  height: 80rpx;
  font-size: 28rpx;
  color: #333333;
  
  &::placeholder {
    color: #999999;
  }
}

.search-btn {
  background-color: #ff4757;
  color: #ffffff;
  padding: 20rpx 40rpx;
  border-radius: 50rpx;
  font-size: 28rpx;
  font-weight: 600;
}

/* 卡密列表样式 */
.card-list {
  padding: 0 30rpx;
}

.card-item {
  background-color: #ffffff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  padding: 30rpx;
  border: 2rpx solid transparent;
  
  &.selected {
    border-color: #007aff;
  }
}

.card-info {
  .product-name,
  .card-type,
  .order-number {
    font-size: 28rpx;
    color: #333333;
    margin-bottom: 20rpx;
  }
}

.card-details {
  margin: 20rpx 0;
}

.card-info-row {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.card-label {
  font-size: 28rpx;
  color: #333333;
  margin-right: 10rpx;
}

.card-value {
  font-size: 28rpx;
  color: #666666;
  flex: 1;
}

.toggle-icon {
  width: 32rpx;
  height: 32rpx;
}

.card-list-expanded {
  margin-top: 20rpx;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 10rpx;
}

.card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15rpx 0;
  border-bottom: 1rpx solid #eeeeee;
  
  &:last-child {
    border-bottom: none;
  }
}

.card-number {
  font-size: 26rpx;
  color: #333333;
  flex: 1;
}

.card-actions {
  display: flex;
  align-items: center;
}

.action-icon {
  width: 40rpx;
  height: 40rpx;
  margin-left: 20rpx;
}

.time-info {
  margin: 20rpx 0;
}

.time-row {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.time-label {
  font-size: 28rpx;
  color: #333333;
  margin-right: 10rpx;
}

.time-value {
  font-size: 28rpx;
  color: #666666;
}

.price-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20rpx;
}

.price {
  font-size: 32rpx;
  color: #ff4757;
  font-weight: 600;
}

.status {
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 600;
  
  &.status-selling {
    background-color: #e8f5e8;
    color: #52c41a;
  }
  
  &.status-trading {
    background-color: #fff7e6;
    color: #fa8c16;
  }
  
  &.status-success {
    background-color: #e6f7ff;
    color: #1890ff;
  }
  
  &.status-delisted {
    background-color: #f6f6f6;
    color: #999999;
  }
  
  &.status-refund {
    background-color: #fff2f0;
    color: #ff4d4f;
  }
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-icon {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 30rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999999;
}
</style>